/* eslint-disable semi */
/* eslint-disable semi */
/* eslint-disable quotes */
<template>
  <van-pull-refresh v-model="isLoading">

    <div class="TopList">

      <router-link to="/HomePage">
        <van-icon class="Backlink" name="arrow-left" />
      </router-link>

      <span> 产品详情 </span>

    </div>
    <div class="title-name">
      <h4 class="title-name-h4">乌金猪</h4>
    </div>
    <div class="outline"></div>

    <div>
      <van-list class="help-son" v-model="loading" :finished="finished" finished-text=" " @load="onLoad">
        <div class="hello-4" v-for="(itemlist, index) in Piglist" :key="index" :class="[itemlist.id !=0? 'gray':'']">

          <div class="hello-4-bottom">
            <div class="show-one">
              <div class="show-one-1">
                <h4>{{itemlist.Money}}</h4>
                <p class="color-2">金额(元/只)</p>
              </div>
              <div class="show-one-2">
                <h4>{{itemlist.Number}}头</h4>
                <p class="color-2 adddistance">数量</p>
              </div>
              <div class="show-one-3">
                <h4 id="show-num">{{itemlist.Month}}</h4>
                <p class="color-2">期限(月)</p>
              </div>
            </div>
            <div class="length">
              <van-progress color="#75DEA7" :percentage="itemlist.Schedule" style="height: 0.213rem;" />
            </div>
            <div class="show-one-4">
              <span>已售445头/</span>
              <span class="text-color">共500头</span>
              <span class="text-left"> 已售89.00%</span>
            </div>
            <div class="choose-num">
              <span class="choose-num-1">选择数量:</span>
              <span class="choose-num-2" @click="addnumber(5,'')" :class="[checkedGroup==5?'addactive':'']">5</span>
              <span class="choose-num-2" @click="addnumber(10,'')" :class="[checkedGroup==10?'addactive':'']">10</span>
              <span class="choose-num-2" @click="addnumber(15,'')" :class="[checkedGroup==15?'addactive':'']">15</span>
              <span class="choose-num-2" @click="addnumber(20,'')" :class="[checkedGroup==20?'addactive':'']">20</span>
              <van-field v-model="filling" class="num-List" label="" placeholder="请输入数量"
                @input="addnumber(filling,'write')" />

            </div>
            <div class="total-price">
              <span class="total-price-size">总价：</span>

              <span class="total-price-size  total-price-color">￥</span>
              <span class=" total-price-size-2  total-price-color"> {{calculate}}.00</span>

            </div>
          </div>
        </div>
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
      </van-list>
    </div>

    <!-- 中间秒杀图片 -->
    <van-tabs color=#37CD87 title-active-color=#37CD87 sticky @click="showtoast">
      <van-tab title="产品详情">
        <div class="hello-1-details" v-for="(item, index) in detailsimages" :key="index">
          <van-image class="hello-1-details-img" width="100%" height="auto" :src="item.imgSrc" />

        </div>
        <div class="filler"> </div>

      </van-tab>

      <van-tab title="购买记录">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了">

          <div class="record-list" v-for="(item,index) in listRecord" :key="index" :title="item">
            <div class="record-list-left">
              <div class="all-list-left">
                <h5 class="name-h5">{{ formatName(item.pigname)}}</h5>
                <p class="time-p">{{item.time}} </p>
              </div>

            </div>

            <div class="record-list-right">
              {{item.pignumber}}头
            </div>
          </div>

          <!-- listRecord: [{ id: 0, name: "111", time: "2020-02-29", number: "1" }], -->
        </van-list>

      </van-tab>
      <van-tab title="本期排行榜">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了">

          <div class="current-list" v-for="(item,index) in listRecord" :key="index" :title="item">
            <div class="current-list-number">{{item.id+1}}</div>
            <div class="current-list-left">

              <div class="all-list-left">
                <h5 class="name-h5">{{formatName(item.pigname)}}</h5>
                <p class="time-p">{{item.time}} </p>
              </div>

            </div>

            <div class="current-list-right">
              {{item.pignumber}}头
            </div>
          </div>

          <!-- listRecord: [{ id: 0, name: "111", time: "2020-02-29", number: "1" }], -->
        </van-list>
      </van-tab>

    </van-tabs>

    <div class="lastadd" @click="Buy()"> 立即抢购</div>

  </van-pull-refresh>
</template>

<script>
import TabBar from "./TabBar.vue";
import https from "./https.js";
import { Dialog } from "vant";
import { Toast } from "vant";
//引入封装好的js方法
import { _debounce, _throttle } from "./untils.js";

//引入其他子组件
export default {
  components: {
    TabBar
  },
  // eslint-disable-next-line space-before-function-paren
  data() {
    return {
      count: 0,
      isLoading: false,
      index: 0,
      bannerimages: [
        { id: 0, imgSrc: require("../assets/images/a16.jpg") }
        // { id: 1, imgSrc: require("../assets/images/a18.jpg") }
      ],
      detailsimages: [
        { id: 0, imgSrc: require("../assets/images/detailsimg1.jpg") },
        { id: 1, imgSrc: require("../assets/images/detailsimg2.jpg") }
      ],
      listRecord: [
        {
          id: 0,
          pigname: "12",
          time: "2020-02-29 10:52:07",
          pignumber: "3"
        },
        {
          id: 1,
          pigname: "1112323132132",
          time: "2020-02-29 10:52:08",
          pignumber: "2"
        },
        {
          id: 2,
          pigname: "113",
          time: "2020-02-29 10:52:09",
          pignumber: "1"
        },
        {
          id: 3,
          pigname: "114",
          time: "2020-02-29 10:52:09",
          pignumber: "1"
        },
        {
          id: 4,
          pigname: "115",
          time: "2020-02-29 10:52:09",
          pignumber: "1"
        },
        {
          id: 5,
          pigname: "116",
          time: "2020-02-29 10:52:10",
          pignumber: "2"
        },
        {
          id: 6,
          pigname: "117",
          time: "2020-02-29 10:52:11",
          pignumber: "3"
        },
        {
          id: 7,
          pigname: "118",
          time: "2020-02-29 10:52:12",
          pignumber: "4"
        },
        {
          id: 8,
          pigname: "119",
          time: "2020-02-29 10:52:13",
          pignumber: "5"
        },
        { id: 9, pigname: "120", time: "2020-02-29 10:52:14", pignumber: "6" }
      ],
      middleimages: [{ id: 0, imgSrc: require("../assets/images/none.png") }],
      Piglist: [
        {
          id: 0,
          Pig: "乌金猪",
          Date: "第1期",
          Way: "认养",
          Percentage: "36.00%",
          Money: "5000.00",
          Number: "500",
          Month: "12",
          Schedule: 89,
          imgSrc: require("../assets/images/a11.jpg"),
          imgSrcover: require("../assets/images/a13.png")
        }
      ],

      loading: false,
      finished: false,
      num: 0,
      Orangetrees: [],
      filling: "",
      calculate: 5000.0,
      checkedGroup: 0
    };
  },
  // eslint-disable-next-line space-before-function-paren
  // created:vue生命周期中的钩子函数，在这个时间点，data中的数据已经注入到响应式系统中
  created() {},

  mounted: function() {
    //初始化页面自执行轻提示框
    this.addtoast();
    //模拟数据接口
    this.MockRequestApi("api/pigList", "", this.icon1, "");
  },
  methods: {
    addtoast() {
      const toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中..."
      });

      let second = 1;
      const timer = setInterval(() => {
        second--;
        if (second) {
          toast.message = "加载中...";
        } else {
          clearInterval(timer);
          // 手动清除 Toast
          toast.clear();
        }
      }, 1000);
    },
    //立即抢购
    Buy() {
      Dialog.alert({
        title: "温馨提示",
        message: "您还未实名认证，请先认证再来购买"
      }).then(() => {
        this.$router.push({ path: "/Autonym" });
      });
    },

    //计算数量
    addnumber(num, way) {
      if (way == "") {
        this.calculate = 5000 * num;
        switch (num) {
          case 5:
            this.checkedGroup = 5;
            console.log(this.checkedGroup);
            break;
          case 10:
            this.checkedGroup = 10;
            break;
          case 15:
            this.checkedGroup = 15;
            break;
          case 20:
            this.checkedGroup = 20;
            break;
          default:
            console.log("错误1!");
            break;
        }
      } else {
        if (num == "") {
          num = 0;
        }
        if (num > 20) {
          this.$toast({
            message: "自选数量最大为20头！"
          });
        } else {
          this.calculate = 5000 * num;
        }
      }
    },

    //vant 加载列表方法
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 1; i++) {
          // this.Piglist.push(this.Piglist.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.Piglist.length > 0) {
          this.finished = true;
        }
      }, 500);
    },

    // 名称 部分隐藏

    formatName(name) {
      var newStr;
      if (name.length === 2) {
        // newStr = name.substr(0, 1) + "*";
        newStr = "*" + name.substr(1, 2);
      } else if (name.length > 2) {
        var char = "";
        for (let i = 0, len = name.length - 2; i < len; i++) {
          char += "*";
        }
        // newStr = name.substr(0, 1) + char + name.substr(-1, 1);
        newStr = "*" + char + name.substr(-1, 1);
      } else {
        newStr = name;
      }
      return newStr;
    },

    //手机号 隐藏
    //     var phone = " 18311110000 ";
    // var regPhone = /^(\d{3})\d{4}(\d{4})$/;
    // console.log(phone .trim().replace(regPhone, "$1****$2"))

    showtoast() {
      this.addtoast();
    },

    //请求模拟数据
    //MockRequestApi  模拟数据接口
    MockRequestApi(
      Url,
      Params,
      icon1Name,
      icon2Name,
      icon3Name,
      icon4Name,
      icon5Name,
      Urlimg
    ) {
      https
        .fetchGet(Url, Params)
        .then(res => {
          //console.log(res);
          let newData = res.data.data;
          switch (newData.code) {
            case 1001:
              console.log("查询成功!");
              console.log(newData.result);

              for (let i = 0; i < newData.result.length; i++) {
                console.log(newData.result[0]);
                if (i == 4) {
                  //icon1
                  console.log(icon1Name);
                  for (let j = 0; j < newData.result[i].icon1.length; j++) {
                    let icon1 = newData.result[i].icon1;
                    (icon1Name[0].active = require("../assets/images/" +
                      icon1[j].active +
                      ".png")),
                      (icon1Name[0].inactive = require("../assets/images/" +
                        icon1[j].inactive +
                        ".png"));
                    // icon1Name.push({
                    //   active: require("../assets/images/" +
                    //     icon1[j].active +
                    //     ".png"),
                    //   inactive: require("../assets/images/" +
                    //     icon1[j].inactive +
                    //     ".png")
                    // });

                    console.log(icon1Name);
                  }

                  //icon2
                  for (let j = 0; j < newData.result[i].icon2.length; j++) {
                    let icon2 = newData.result[i].icon2;
                    (icon2Name[0].active = require("../assets/images/" +
                      icon2[j].active +
                      ".png")),
                      (icon2Name[0].inactive = require("../assets/images/" +
                        icon2[j].inactive +
                        ".png"));
                  }

                  //icon3
                  for (let j = 0; j < newData.result[i].icon3.length; j++) {
                    let icon3 = newData.result[i].icon3;
                    (icon3Name[0].active = require("../assets/images/" +
                      icon3[j].active +
                      ".png")),
                      (icon3Name[0].inactive = require("../assets/images/" +
                        icon3[j].inactive +
                        ".png"));
                  }

                  //icon4
                  for (let j = 0; j < newData.result[i].icon4.length; j++) {
                    let icon4 = newData.result[i].icon4;
                    (icon4Name[0].active = require("../assets/images/" +
                      icon4[j].active +
                      ".png")),
                      (icon4Name[0].inactive = require("../assets/images/" +
                        icon4[j].inactive +
                        ".png"));
                  }

                  //icon5
                  for (let j = 0; j < newData.result[i].icon5.length; j++) {
                    let icon5 = newData.result[i].icon5;
                    (icon5Name[0].active = require("../assets/images/" +
                      icon5[j].active +
                      ".png")),
                      (icon5Name[0].inactive = require("../assets/images/" +
                        icon5[j].inactive +
                        ".png"));
                  }
                }
              }

              break;
            case 1002:
              console.log("查询失败1!");
              break;
            default:
              console.log("错误1!");
              break;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* //自定义.css的样式路径 */
/* @import "../css/HomePage.css"; */

* {
  padding: 0;
  margin: 0;
}
body {
  background-color: #f6f6f6;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  display: block;
}
div {
  display: block;
  box-sizing: border-box;
}

.TopList {
  width: 100%;
  height: 30px;
  font-size: 16px;
  text-align: left;
  background: #ffffff;
}
.Backlink {
  line-height: 50px;
  margin-left: 10px;
}
.TopList span {
  line-height: 25px;
  margin-left: 110px;
  width: 60%;
}

.van-swipe {
  width: 100%;
  height: 100%;
}

.hello-3 {
  width: 100%;
  height: 200.34px;
  padding: 0 3%;
  padding-top: 10%;
  padding-left: 35%;
  background: #ffffff;
  text-align: left;
}

.hello-3 p {
  margin-top: 10px;
  margin-left: -10px;
  font-size: 16px;
  color: #bbb;
}
.recive {
  width: 30px;
  height: 20px;
  text-align: center;
  padding-left: 5px;
  margin-right: 10px;
  color: rgb(233, 92, 111);
  background-color: #fff;
}

.title-name {
  width: 100%;
  height: 65px;
  padding: 0 3%;
  text-align: left;
  background: #ffffff;
  line-height: 85px;
}
.outline {
  width: 100;
  height: 9px;
  background: #f6f6f6;
}
.title-name-h4 {
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.lastadd {
  position: fixed;
  bottom: 0px;
  background: #37cd87;
  width: 100%;
  height: 50px;
  color: #fff;
  line-height: 50px;
  font-size: 18px;
}

.gray {
  color: gray;
  opacity: 0.5;
}
.onlygray {
  color: gray;
}
.close {
  display: none;
}

li {
  position: absolute;
}

.active {
  background: #bfd6b6 !important;
}

.hello-4 {
  height: 221.25px;
  border-radius: 10px;
  overflow: hidden;

  background: #ffffff;
  margin-bottom: 10px;
}
.hello-4-top {
  padding-top: 10px;
  padding-left: 10px;
  width: 100%;
  height: 80px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 3%;
}

.hello-4-top-left {
  width: 58px;
  height: 58px;
}
.hello-4-top-left img {
  width: 58px;
  height: 58px;
}

.hello-4-top-right {
  width: 106.69px;
  height: 60px;
  text-align: left;
  padding-left: 12px;
}

.hello-4-top-last {
  width: 58px;
  height: 58px;
  margin-left: 105px;
}
.hello-4-top-last img {
  width: 58px;
  height: 58px;
}

.pig {
  width: 100%;
  font-size: 16px;
  color: #333;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.secend {
  display: flex;
  padding-top: 10px;
}
.date {
  width: 36.69px;
  height: 20px;
  text-align: center;
  padding-left: 5px;
  background-color: rgb(233, 92, 111);
  color: #fff;
  margin-right: 10px;
}
.recive {
  width: 30px;
  height: 20px;
  text-align: center;
  padding-left: 5px;
  margin-right: 10px;
  color: rgb(233, 92, 111);
  background-color: #fff;
}

.hello-4-bottom {
  width: 100%;
  padding: 3%;
}
.show-one {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin-top: 10px;
}

.color-2 {
  color: #8a8a8a;
  font-size: 14px;
}
.adddistance {
  text-align: center;
  width: 100%;
}
.show-one-1 {
  width: 33.33%;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  text-align: left;
}
.show-one-2 {
  width: 33.33%;
  display: flex;
  flex-flow: row wrap;
  text-align: center;
  justify-content: flex-start;
}
.show-one-3 {
  width: 33.33%;
  display: flex;
  flex-flow: row wrap;
  text-align: center;
  padding-left: 65px;
  justify-content: flex-start;
}
.length {
  width: 100%;
  height: 40px;
  padding-top: 20px;
}

.show-one-4 {
  width: 100%;
  height: 20px;
  color: #5bd394;
  text-align: left;
  font-size: 14px;
}
h4 {
  color: #e95c6f;
  font-size: 20px;
  margin-bottom: 5px;
  clear: both;
  width: 100%;
  display: block;
  font-weight: bold;
}

.text-color {
  color: silver;
}
.text-left {
  margin-left: 145px;
}
.choose-num {
  width: 100;
  height: 40px;
  padding-top: 10px;
  text-align: left;
  display: flex;
}
.choose-num span {
  display: flex;
}
.choose-num-1 {
  width: 235px;
  height: 36px;
  line-height: 36px;
  margin-right: 11px;
  color: #555;
  font-size: 16px;
}

.choose-num-2 {
  margin-right: 5px;
  height: 24px;
  line-height: 24px;
  border: 1px solid #f6f6f6;
  padding: 4px 7px;
  font-size: 16px;
  color: #333;
  border-radius: 5px;
  margin-right: 8px;
  margin-bottom: 8px;
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
}
.num-List {
  width: 100px;
  height: 32px;
  line-height: 24px;
  border: 0.2px solid #f6f6f6;
  padding: 4px 7px;
  font-size: 12px;
  color: #333;
  border-radius: 5px;
  margin-right: 8px;
  margin-bottom: 8px;
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
}
.total-price {
  width: 100%;
  height: 60px;
  line-height: 60px;
  display: flex;
}
.total-price-size {
  display: flex;
  font-size: 14px;
}
.total-price-size-2 {
  display: flex;
  font-size: 22px;
  line-height: 55px;
}
.total-price-color {
  color: #ff586d;
}

.hello-1 {
  width: 100%;
  height: 600px;
  background: #f6f6f6;
}
.hello-1 p {
  margin-top: 18px;
  font-size: 15px;
  color: #bbb;
}
.hello-1-img {
  margin-top: 35px;
  margin-left: 148px;
  border-radius: 10px;
  pointer-events: none;
}
.hello-1-details {
  width: 100%;
  height: auto;
}
.hello-1-details-img {
  border-radius: 10px;
  pointer-events: none;
}
.filler {
  width: 100%;
  height: 50px;
}
.record-list {
  width: 100%;
  height: 88px;
  padding: 0 3%;
  display: flex;
  background: #ffffff;
  padding-top: 20px;
  border-bottom: 1px solid #f6f6f6;
}
.record-list-left {
  width: 323px;
  height: 100%;
  display: flex;
}

.record-list-right {
  width: 66px;
  height: 66px;
  display: flex;
  width: 60px;
  text-align: center;
  height: 60px;
  line-height: 60px;
  font-size: 18px;
}
.all-list-left {
  width: 123px;
  height: 50px;
  text-align: left;
}
.name-h5 {
  width: 123px;
  color: #555;
  font-size: 16pxm;
  font-weight: 500;
  margin-bottom: 10px;
}
.time-p {
  width: 123px;
  color: #999;
  font-size: 12px;
}

.current-list {
  width: 100%;
  height: 88px;
  padding: 0 3%;
  display: flex;
  background: #ffffff;
  padding-top: 20px;
  border-bottom: 1px solid #f6f6f6;
}
.current-list-left {
  width: 323px;
  height: 100%;
  display: flex;
}

.current-list-right {
  width: 66px;
  height: 66px;
  display: flex;
  width: 60px;
  text-align: center;
  height: 60px;
  line-height: 60px;
  font-size: 18px;
}
.current-list-number {
  height: 22px;
  width: 44px;
  font-size: 18px;
  padding-top: 20px;
  text-align: left;
  color: #333;
  flex: none;
  font-style: oblique;
}
.addactive {
  background: #ff586d;
  border: 0.02667rem solid #ff586d;
  color: #fff;
}
</style>


